<template>
  <li class="mint-indexsection">
    <p class="mint-indexsection-index">{{ customIndexStr?customIndexStr:index }}</p>
    <ul>
      <slot></slot>
    </ul>
  </li>
</template>

<style lang="less">
  .mint-indexsection {
    padding: 0;
    margin: 0
  }

  .mint-indexsection-index {
    margin: 0;
    padding: 10px;
    background-color: #fafafa
  }

  .mint-indexsection-index + ul {
    padding: 0
  }

</style>

<script>
  export default {
    name: 'index-section',

    props: {
      customIndexStr: String,
      index: {
        type: String,
        required: true
      }
    },

    mounted() {
      this.$parent.sections && this.$parent.sections.push(this);
    },

    beforeDestroy() {
      if (!this.$parent.sections) return
      let index = this.$parent.sections.indexOf(this);
      if (index > -1) {
        this.$parent.sections.splice(index, 1);
      }
    }
  };
</script>
